<template>
  <div>
    <el-row :gutter="64">
      <el-col
        :xs="12"
        :sm="8"
        :md="6"
        :lg="4"
        v-for="(item,index) in userList"
        :key="index"
        style="padding-bottom:12px"
      >
        <el-row :gutter="12">
          <el-col
            :span="12"
            style="text-align:right"
          >{{item.name}}</el-col>
          <el-col :span="12">
            <!-- <el-tag
                v-if="item.TREX_LEVEL>1"
                size="small"
              >管理</el-tag> -->
            <el-switch
              :disabled="!operatable || item.TREX_LEVEL>1"
              :value="item.TREX_LEVEL>0"
              @change="changeUser(index)"
            ></el-switch>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'coachManageView',
    computed: {
      screenSize() { return this.$store.state.screenSize },
      userList() { return this.$store.state.userList },
    },
    data() {
      return {
        operatable: true,
      };
    },
    methods: {
      changeUser(index) {
        // console.log(this.userList[index].name);
        this.operatable = false;
        if (this.userList[index].TREX_LEVEL === 0) {
          this.$store.dispatch('setCoach', {
            index,
            number: this.userList[index].number,
            TREX_LEVEL: 1
          }).then(() => { this.operatable = true; }).catch(() => { this.operatable = true; });
        }
        if (this.userList[index].TREX_LEVEL === 1) {
          this.$store.dispatch('setCoach', {
            index,
            number: this.userList[index].number,
            TREX_LEVEL: 0
          }).then(() => { this.operatable = true; }).catch(() => { this.operatable = true; });
        }
      },
    }
  }
</script>

<style>

</style>